<template>
  <div class="login">
    <van-field
      v-model="phone"
      placeholder="手机号"
      class="input mt"
    />
    <van-field
      v-model="password"
      type="password"
      placeholder="密码"
      class="input mt"
    />
    <van-checkbox
      v-model="checked"
      shape="square"
      checked-color="black"
      class="mt check">记住用户名</van-checkbox>
    <van-button color="black" class="mt" size="large" :disabled="!checked" @click="login">登录</van-button>
    <van-divider class="line">文字</van-divider>
    <div class="icont">
      <span class="iconfont icon-qq"></span>
      <span class="iconfont icon-zhifubao"></span>
      <span class="iconfont icon-weibo"></span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      checked:false,
      phone:'',
      password:'',
    }
  },
  methods: {
    login() {
      localStorage.setItem('phone',this.phone)
      let userinfo={
        uphone:this.phone,
        upwd:this.password
      }
      this.axios.post('/user/login',this.qs.stringify(userinfo)).then(res=>{
        // console.log(res);
        if(res.data.code==200){
          this.$dialog.alert({
            message: `${res.data.msg}`,
          }).then(confirm=>{
            this.getUser(res)
          });
        }else{
          this.$dialog.alert({
            message: `${res.data.msg}`,
          });
        }
      })
    },
    getUser(res){
      let uid=res.data.data
      let isLogin=true
      sessionStorage.setItem('uid',uid)
      this.$store.commit('getUserId',uid)
      this.$store.commit('getLogin',isLogin)
      this.axios.get(`/product/shopcart?uid=${uid}`).then(res=>{
        // console.log(res);
        if(res.data.data){
          let shopcar=res.data.data
          this.$store.commit('getShopcart',shopcar)
          }
        })
      this.$router.push('/')
    }
  },
}
</script>
<style lang="scss" scoped>
.login{
  margin-top: 20px;
  .mt {
    margin-top: 20px;
  }
  .input {
    border: 1px solid black;
  }
  .check{
    font-size: 14px;
  }
  .icont {
    font-size: 2.5em;
    text-align: center;
    span:nth-child(2) {
      margin: 0 60px;
    }
  }
}
</style>